<template>
    <div class="app-container">
        <el-row :gutter="0">
            <!--专病数据-->
            <el-form class="formBox searchForm" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="68px">
                <el-form-item label="医院" prop="hospital" clearable>
                    <department :isHospital="true" :isdepat="true" @refreshData="refreshData" deptWidth="200px"
                        ref="department"></department>
                </el-form-item>
                <el-form-item label="类别" prop="type" clearable>
                    <el-select v-model="queryParams.type" placeholder="类别" clearable filterable style="width: 200px">
                        <el-option v-for="dict in dict.type.sys_textmanage_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="专病名称" prop="diseaseId">
                    <el-select v-model="queryParams.diseaseId" placeholder="专病名称" clearable filterable style="width: 200px">
                        <el-option v-for="dict in sysManageDiseases" :key="dict.diseaseClassifyId"
                            :label="dict.diseaseClassifyName" :value="dict.diseaseClassifyId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status" clearable>
                    <el-select v-model="queryParams.status" placeholder="状态" clearable filterable style="width: 200px">
                        <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建人" prop="publisher">
                    <el-input v-model="queryParams.publisher" placeholder="请输入创建人名称" clearable style="width:200px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
                </el-form-item>
            </el-form>
            <div class="formBox searchForm" ref="statisticalTable" style="margin-bottom:0px!important;">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                            v-hasPermi="['system:textManage:add']">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="el-icon-plus" size="mini"
                            @click="platformTempDialogVisible = true" v-hasPermi="['system:text:temp']">引入平台模板</el-button>
                    </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-table v-loading="loading" :data="classifyList" border>
                    <!--                <el-table-column type="selection" width="50" align="center" />-->
                    <el-table-column label="序号" align="center" type="index" width="50">
                        <template slot-scope="scope">
                            <span>{{ getIndex(scope.$index) }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column sortable label="设备编号" align="center" prop="deviceId" width="100" /> -->
                    <el-table-column sortable label="类别" align="center" prop="type" :show-overflow-tooltip="true"
                        width="150">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_textmanage_type" :value="scope.row.type" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="专病名称" align="center" prop="diseaseNames" :show-overflow-tooltip="true"
                        width="100">
                        <!-- <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_manage_diseases" :value="scope.row.diseaseIds" />
                        </template> -->
                    </el-table-column>
                    <el-table-column sortable label="标题" align="center" prop="title" :show-overflow-tooltip="true"
                        style="width:300px;" />
                    <!-- <el-table-column label="内容" align="center" prop="content">
                        <template slot-scope="scope">
                            <el-tooltip placement="right" effect="light">
                                <div slot="content" v-html="scope.row.content" style="max-width: 700px" />
                                <span style="text-decoration: underline;color: #10a1df; ">
                                  {{scope.row.title}}
                                </span>
                            </el-tooltip>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="医院" align="center" prop="hospitalName" :show-overflow-tooltip="true"
                        width="150">
                        <template slot-scope="scope">
                            <departTag :options="deptNameLists" :value="scope.row.hospitalId" />
                        </template>
                    </el-table-column>
                    <el-table-column label="科室" align="center" prop="deptName" :show-overflow-tooltip="true" width="150">
                        <template slot-scope="scope">
                            <departTag :options="deptNameLists" :value="scope.row.deptId" />
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == '1'" style="color:red">停用</span>
                            <span v-else style="color:green">正常</span>
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="创建人" align="center" prop="publisher" :show-overflow-tooltip="true" />
                    <el-table-column sortable label="创建时间" align="center" prop="createTime" width="160">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column  label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
                    <el-table-column label="操作" align="center" fixed="right" width="260"
                        class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:textManage:edit']">修改</el-button>
                            <!--                            <el-button size="mini" type="text" icon="el-icon-delete"-->
                            <!--                                @click="handleDelete(scope.row)">删除</el-button>-->
                            <el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrint(scope.row)"
                                v-hasPermi="['system:textManage:preview']">预览打印</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
        </el-row>
        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :before-close="cancel"
            :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="类别" prop="type">
                            <el-select v-model="form.type" placeholder="类别" clearable filterable style="width: 100%"
                                :disabled="form.textId && !isAdmin ? true : false">
                                <el-option v-for="dict in dict.type.sys_textmanage_type" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <div style="height:5px"></div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status" placeholder="状态" clearable filterable style="width:100%">
                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <div style="height:5px"></div>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="使用科室" prop="deptId" v-if="open">
                            <department :isAdd="true" @changedepatData="changedepatData" :HospitalId="form.hospitalId"
                                :deptIds="form.deptId" :isdisabled="false" :Optiohospitals="true"></department>
                            <!-- <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
                                :default-expand-level="1" placeholder="请选择归属科室" /> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="适用专病" prop="diseaseIds">
                            <el-select v-model="form.diseaseIds" multiple placeholder="适用专病" clearable filterable
                                style="width:100%">
                                <el-option v-for="dict in sysManageDiseases" :key="dict.diseaseClassifyId"
                                    :label="dict.diseaseClassifyName" :value="dict.diseaseClassifyId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="发布人" prop="publisher">
                            <el-input v-model="form.publisher" placeholder="请输入发布人" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <div style="height:5px"></div>
                    </el-col>
                    <el-col :span="17">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" placeholder="请输入标题" clearable style="width:100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="内容" prop="content" v-if="open">
                            <WangEditor @change="changeWang" :value="form.content"></WangEditor>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitForm">提 交</el-button>
                <!-- <el-button @click="cancel">取 消</el-button> -->
            </div>
        </el-dialog>

        <!-- 打印预览 -->
        <el-dialog title="预览" :visible.sync="printDialogVisible" width="70%" append-to-body v-dialogDrag
            :close-on-click-modal="false">
            <print v-if="printDialogVisible" :printInfo="printInfo"></print>
        </el-dialog>
        <!-- 引入平台模板 -->
        <el-dialog :title="platformTitle" :visible.sync="platformTempDialogVisible" v-dialogDrag width="90%"
            :close-on-click-modal="false">
            <platformTemp v-if="platformTempDialogVisible" @closeplatformTempDialogVisible="closeplatformTempDialogVisible"
                type="6" @refresh="refreshTextList">
            </platformTemp>
        </el-dialog>

    </div>
</template>

<script>
import { deptTreeSelect, } from "@/api/system/user";
import department from "@/views/components/department/index.vue";
import departTag from "@/views/components/department/departTag.vue";
import platformTemp from "@/views/components/platformTemp/textTemp.vue";
import {
    listClassify
} from "@/api/system/classify";
import { deptNameList } from "@/api/system/dept";
import { listText, getText, delText, addText, updateText } from "@/api/system/text";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import WangEditor from "@/views/components/WangEditor";
import print from "@/views/components/print";
export default {
    name: "textManage",
    dicts: ["sys_textmanage_type", 'sys_manage_diseases'],
    components: { WangEditor, print, department, departTag, Treeselect, platformTemp },
    data() {
        return {
            platformTempDialogVisible: false,
            platformTitle: '平台模板-文本',
            printDialogVisible: false,
            sysUseTypeArr: [
                { label: '正常', value: '0' },
                { label: '停用', value: '1' }

            ],
            editor: null,
            // 遮罩层
            loading: true,
            printInfo: {},
            // 选中数组
            ids: [],
            diseaseClassifyName: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 专病表格数据
            classifyList: null,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 是否修改
            inputDisabled: false,
            // 表单参数
            // form: {},
            form: {
                title: '',//文本标题
                type: '',//文本类别 （字典管理）
                diseaseIds: '',//专病类型 （字典管理）
                status: '0',//使用状态 //0在用
                content: '',//文本内容
                hospitalId: undefined,
                deptId: undefined,
                publisher: ''//创建人
            },
            detectionType: [],//可选的 检测指标  （接口返回）仅前端用
            sysManageDiseases: [],//专病管理
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: undefined, //文本类别
                diseaseId: undefined,//专病类别
                publisher: undefined,//创建人
                hospitalId: undefined,
                deptId: undefined,
            },
            deptNameLists: [],
            // 表单校验
            rules: {
                title: [
                    {
                        required: true,
                        message: "标题不能为空",
                        trigger: "blur",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "分类必选",
                        trigger: "blur",
                    },
                ],
                status: [
                    {
                        required: true,
                        message: "分类必选",
                        trigger: "blur",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "内容不能为空！",
                        trigger: "blur",
                    },
                ],
                diseaseIds:[
                  {
                    required: true,
                    message: "专病不能为空！",
                    trigger: "blur",
                  },
                ]
                // deptId: [
                //     {
                //         required: true,
                //         message: "科室必选",
                //         trigger: "blur",
                //     },
                // ],
            },
            // 科室树选项
            deptOptions: undefined,

        };
    },
    watch: {},
    created() {
        this.loading = false;
        this.getclassList()
        this.getDeptTree();
    },
    computed: {
        isAdmin() {
            return this.$store.state.user.name === 'admin' ? true : false
        }
    },
    methods: {
        closeplatformTempDialogVisible() {
            this.platformTempDialogVisible = false
        },
        /** 平台模板引用或者批量引用点击后关闭弹窗并刷新本院文本列表 */
        refreshTextList() {
            this.platformTempDialogVisible = false
            this.getList()
        },
        /** 查询科室下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        refreshData(data) {
            this.queryParams.pageNum = 1;
            this.queryParams.hospitalId = data.hospitalId
            this.queryParams.deptId = data.deptId
            this.getdeptNameList();
        },
        changedepatData(data) {
            if (data && data.length > 0) {
                this.form.deptId = data[0].deptId
                this.form.hospitalId = data[0].parentId==100?data[0].deptId:data[0].parentId
            } else {
                this.form.deptId = undefined
                this.form.hospitalId = undefined
            }
        },
        // 回显医院及门诊
        getdeptNameList() {
            deptNameList().then((response) => {
                this.deptNameLists = response.data;
                this.getList();
            });
        },
        handlePrint(row) {//打印预览
            this.printInfo = row
            this.printDialogVisible = true
            console.log('handlePrint-------', this.printInfo)
        },
        // 获取专病列表
        getclassList() {
            this.loading = true;
            let params = {
                pageNum: 1,
                pageSize: 9999,
                status: '0',
            }
            listClassify(
                params
            ).then((response) => {
                this.sysManageDiseases = response.rows;
            });
        },
        changeWang(html) {//富文本
            //这里的html是带有标签的
            this.form.content = html
            // console.log(this.form.content)
        },

        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1;
        },
        /** 查询文本列表 */
        getList() {
            this.loading = true;
            listText(
                this.queryParams
            ).then((response) => {
                this.classifyList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        // 表单重置
        reset() {
            this.form = {
                title: '',//文本标题
                type: '',//文本类别 （字典管理）
                diseaseIds: '',//专病类型 （字典管理）
                status: '0',//使用状态 //0在用
                content: '',//文本内容
                publisher: ''//创建人
            },
                this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            if (this.$refs.department) {
                this.$refs.department.reset()
            }
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.form.publisher = this.$store.state.user.nickName  //默认创建人为登陆人
            this.inputDisabled = false
            this.open = true;
            this.title = "新增文本";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.inputDisabled = true
            const textId = row.textId;
            getText(textId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改文本";
            });
        },

        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    console.log(this.form)
                    if (!!this.form.deptId) {
                        if (this.form.textId != undefined) {
                            updateText(this.form).then((response) => {
                                if (response.code == 200) {
                                    this.$modal.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                }
                            });
                        } else {
                            addText(this.form).then((response) => {
                                if (response.code == 200) {
                                    this.$modal.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                }

                            });
                        }
                    } else {
                        this.$message.warning('使用科室不能为空')
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const title = row.title
            const textId = row.textId;
            this.$modal
                .confirm(
                    '是否确认删除标题为"' +
                    title +
                    '"的数据项？'
                )
                .then(function () {
                    return delText(textId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },

    },
};
</script>
<style scoped>
.el-tag {
    margin-right: 15px;
}
</style>
